/** useReducer */
import React, { useReducer } from 'react'

// 初始化数据
const initData = { counter: 0 }

// 操作类型：使用字符串描述
const actionType = {
  INCREMENT: 'counter/increment',
  DECREMENT: 'counter/decrement'
}

// Reducer函数：数据操作函数
function counterReducer(state, actionCreator) {
  switch (actionCreator.type) {
    case actionType.INCREMENT:
      state.counter += actionCreator.data
      console.log("增加数据", state)
      return { ...state }

    case actionType.DECREMENT:
      state.counter -= actionCreator.data
      console.log("减少数据", state)
      return { ...state }

    default:
      console.log("读取数据", state)
      return state
  }
}

export default function HookReducer() {

  let [state, dispatch] = useReducer(counterReducer, initData)

  // 类组件中，直接使用简洁语法声明函数
  // add() { }

  // 函数组件中，需要使用闭包语法，函数内部声明函数
  const add = () => {
    dispatch({ type: actionType.INCREMENT, data: 1 })
  }

  const sub = () => {
    dispatch({ type: actionType.DECREMENT, data: 1 })
  }

  return (
    <div>
      <h3>4. useReducer状态管理</h3>
      <h5>计数器：{state.counter}</h5>
      <div>
        {/* 思考：为什么这里发送点击请求，每次操作数据1，但是实际操作执行了两次？ */}
        <button onClick={add}>增加数据(操作状态数据)</button>
        <button onClick={sub}>减少数据(操作状态数据)</button>
      </div>
    </div>
  )
}
